<!--设置员工管理页面-->
<template>
<el-row class="container">
    <el-col :span="24" style="min-height:60px;height:5%;background-color: #014171;">
        <el-row>
            <el-col :span="10">
                <div class="logo">
                    <el-button type="primary" icon="el-icon-back" @click="showMainPage">&nbsp;&nbsp;{{$t("setting.route.staffMgrMenu.returnBtnName")}}&nbsp;&nbsp;</el-button>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="userinfo">
                    <el-button type="primary" @click="showAddStaffPage" icon="el-icon-circle-plus-outline">{{$t("setting.route.staffMgrMenu.addStaffBtnName")}}</el-button>
                </div>
            </el-col>
        </el-row>
    </el-col>

    <el-col :span="24" style="margin-top:20px;padding-left:20px;padding-right:20px;">
        <choiceStaff ref="choiceStaff" :clickEvent="true" @click="selectStaff"></choiceStaff>
    </el-col>

    <el-col :span="24" style="height:5%;padding-left:20px;padding-right:20px;width:100%;" v-show="editFormShow">
        <el-form ref="form" :model="form" :rules="saveFormRules" label-width="120px" style="background-color:#ffffff;padding:20px 20px 2px 20px;">
            <el-form-item :label="$t('setting.route.staffMgrMenu.form.staffName')">
                <el-col :span="12">
                    <el-form-item prop="firstName">
                        <el-input v-model="form.firstName" :placeholder="$t('setting.route.staffMgrMenu.form.staffNameFirstName')" style="width: 100%;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="familyName">
                        <el-input v-model="form.familyName" :placeholder="$t('setting.route.staffMgrMenu.form.staffNameFamilyName')" style="width: 100%;"></el-input>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item :label="$t('setting.route.staffMgrMenu.form.staffPhone')" prop="phone">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item :label="$t('setting.route.staffMgrMenu.form.staffWechat')">
                <el-input v-model="form.wechat"></el-input>
            </el-form-item>
            <el-form-item :label="$t('setting.route.staffMgrMenu.form.salaryMode')">
                <el-radio-group v-model="form.salaryMode" @change="handleChangeSalaryModeEvent">
                    <el-radio label="1" border size="medium">{{$t('setting.route.staffMgrMenu.form.salaryModeList.baseSalary')}}</el-radio>
                    <el-radio label="2" border size="medium">{{$t('setting.route.staffMgrMenu.form.salaryModeList.commission')}}</el-radio>
                    <el-radio label="3" border size="medium">{{$t('setting.route.staffMgrMenu.form.salaryModeList.baseSalaryAndCommission')}}</el-radio>
                    <el-radio label="4" border size="medium">{{$t('setting.route.staffMgrMenu.form.salaryModeList.baseSalaryOrCommission')}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('setting.route.staffMgrMenu.form.baseSalaryVal')" v-show="form.baseSalaryEnabled">
                <el-input v-model="form.baseSalary" :placeholder="$t('setting.route.staffMgrMenu.form.baseSalaryTip')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('setting.route.staffMgrMenu.form.commissionVal')" v-show="form.commissionEnabled">
                <el-slider v-model="form.commission" show-input>
                </el-slider>
            </el-form-item>
            <el-form-item :label="$t('setting.route.staffMgrMenu.form.managerRole')">
                <el-switch v-model="form.roleId" active-value="2" inactive-value="1"></el-switch>
            </el-form-item>
            <el-form-item :label="$t('setting.route.staffMgrMenu.form.staffPwd')" prop="password">
                <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item style="text-align:right">
                <el-button icon="el-icon-remove-outline" @click="deleteStaff">{{$t("setting.route.staffMgrMenu.form.btn.delStaff")}}</el-button>
                <el-button type="primary" @click="saveStaff">{{$t("setting.route.staffMgrMenu.form.btn.editStaff")}}</el-button>
            </el-form-item>
        </el-form>
    </el-col>

</el-row>
</template>

<script>
import ChoiceStaff from '../../components/choiceStaff.vue';
import {
    getStaffDetail,
    delStaff,
    editStaff
} from '../../api/api';
export default {
    components: {
        choiceStaff: ChoiceStaff
    },
    data() {
        return {
            editFormShow: false,
            form: {
                staffId: '',
                familyName: '',
                firstName: '',
                phone: '',
                wechat: '',
                salaryMode: "1",
                baseSalaryEnabled: true,
                baseSalary: 0,
                commissionEnabled: false,
                commission: 0,
                roleId: "1",
                password: '',
            },
            saveFormRules: {
                firstName: [{
                    required: true,
                    message: this.$t('setting.route.staffMgrMenu.form.valid.staffName'),
                    trigger: 'blur'
                }],
                familyName: [{
                    required: true,
                    message: this.$t('setting.route.staffMgrMenu.form.valid.staffName'),
                    trigger: 'blur'
                }],
                phone: [{
                    required: true,
                    message: this.$t('setting.route.staffMgrMenu.form.valid.staffPhone'),
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: this.$t('setting.route.staffMgrMenu.form.valid.staffPwd'),
                    trigger: 'blur'
                }]
            }
        };
    },
    mounted() {},
    methods: {
        showMainPage() {
            this.$router.push({
                path: '/setting/index'
            });
        },
        showAddStaffPage() {
            this.$router.push({
                path: '/setting/staffmgr/add'
            });
        },
        handleChangeBtnBaseSalary() {

        },
        handleChangeSalaryModeEvent() {
            this.form.baseSalary = 0;
            this.form.commission = 0;
            if (this.form.salaryMode == "1") {
                this.form.baseSalaryEnabled = true;
                this.form.commissionEnabled = false;
            }
            if (this.form.salaryMode == "2") {
                this.form.baseSalaryEnabled = false;
                this.form.commissionEnabled = true;
            }
            if (this.form.salaryMode == "3" || this.form.salaryMode == "4") {
                this.form.baseSalaryEnabled = true;
                this.form.commissionEnabled = true;
            }
        },
        saveStaff() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let para = Object.assign({}, this.form);
                    para.id = para.staffId;
                    editStaff(para).then(res => {
                        let {
                            msg,
                            code
                        } = res;
                        if (code !== "0") {
                            this.$message({
                                message: msg,
                                type: 'error'
                            });
                        } else {
                            this.$message({
                                message: this.$t('setting.route.staffMgrMenu.form.btn.editStaffSuccessMsg'),
                                type: 'success'
                            });
                            //重载选择员工列表，加载员工列表
                            this.$refs.choiceStaff.getShopStaffsEvent();
                        }
                    });
                }
            });
        },
        deleteStaff() {
            //删除指定的员工
            this.$confirm(this.$t('setting.route.staffMgrMenu.form.btn.delStaffDialog.content'), this.$t('setting.route.staffMgrMenu.form.btn.delStaffDialog.title'), {
                type: 'warning'
            }).then(() => {
                let para = {
                    staffId: this.form.staffId
                };
                delStaff(para).then(res => {
                    let {
                        msg,
                        code
                    } = res;
                    if (code !== "0") {
                        this.$message({
                            message: msg,
                            type: 'error'
                        });
                        v
                    } else {
                        this.$message({
                            message: this.$t('setting.route.staffMgrMenu.form.btn.delStaffDialog.successMsg'),
                            type: 'success'
                        });
                        this.editFormShow = false;
                        //重载选择员工列表，加载员工列表
                        this.$refs.choiceStaff.getShopStaffsEvent();
                    }
                });
            }).catch(() => {

            });
        },
        selectStaff(user) {
            //alert(this.$t("collectmoney.checkout.bars.cash"));
            this.editFormShow = true;
            console.log("选中了员工：" + user.realName);
            this.$refs['form'].resetFields();
            let para = {
                staffId: user.id
            };
            getStaffDetail(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    this.form.staffId = res.data.id;
                    this.form.roleId = res.data.roleId + "";
                    this.form.familyName = res.data.familyName;
                    this.form.firstName = res.data.firstName;
                    this.form.phone = res.data.phone;
                    this.form.wechat = res.data.wechat;
                    this.form.baseSalary = res.data.baseSalary;
                    this.form.commission = res.data.commission;
                    this.form.password = res.data.password;
                    //必须转为字符串
                    this.form.salaryMode = res.data.salaryMode + "";
                    if (this.form.salaryMode == "1") {
                        this.form.baseSalaryEnabled = true;
                        this.form.commissionEnabled = false;
                    }
                    if (this.form.salaryMode == "2") {
                        this.form.baseSalaryEnabled = false;
                        this.form.commissionEnabled = true;
                    }
                    if (this.form.salaryMode == "3" || this.form.salaryMode == "4") {
                        this.form.baseSalaryEnabled = true;
                        this.form.commissionEnabled = true;
                    }
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #012547;
    font-family: Helvetica, Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
}

.nav {
    display: flex;
    justify-content: Center;
    align-items: Center;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    font-size: 48px;
}

.userinfo {
    display: flex;
    justify-content: left;
    align-items: Center;
    text-align: right;
    padding-right: 35px;
    float: right;
    height: 60px;
}

.logo {
    display: flex;
    justify-content: left;
    align-items: Center;
    height: 60px;
    font-size: 26px;
    padding-left: 20px;
    padding-right: 20px;
}
</style>
